<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link href="css/style.css" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			/*
			* onclick == click 绑定单机事件
			* onblur == blur
			* onchange == change
			* mouseover() 鼠标移入事件  不需要点击，鼠标移动到指定位置就触发
			* mouseout()  鼠标移除事件  移出指定位置就触发
			* bind() 可以给元素一次性绑定一个或多个事件  多个事件用空格隔开
			* one() 使用跟bind()一样，但是one方法绑定的每个事件只会响应一次
			* unbind() 跟bind方法相反的操作，解除绑定，取消事件
			* live() 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件，
			* 		 哪怕是这个元素是后面动态创建出来的也有效
			* */
			$(function(){
				$("h5").click(function () { // 传function是绑定事件
					alert('h5单击事件 == click方法绑定')
				});
				//使用按钮触发另一个单机事件
				/*$("button").click(function () {
					$("h5").click(); // 不传function是触发事件
				});*/

				// 使用live绑定的单击事件
				$("h5").live("click",function () {
					alert('h5单击事件 == live方法绑定');
				});
				//动态创建的HTML内容，在之前的h5绑定的click事件没用 但是使用live绑定的事件就可以用
				$('<h5 class="head">什么是jQuery?</h5>').appendTo( $("#panel") );


				//鼠标移入 mouseover
				$("h5").mouseover(function () {
					console.log("你进来了")
				});
				//鼠标移出 mouseout
				$("h5").mouseout(function () {
					console.log("你出去了")
				});

				//使用bind绑定事件
				$("h5").bind("click mouseover mouseout",function () {
					console.log("这是bind绑定的事件");
				});
				//使用one绑定事件
				$("h5").one("click mouseover mouseout",function () {
					console.log("这是one绑定的事件");
				});
				//移除h5标签的click方法事件
				$("h5").unbind("click");


			});
		
		</script>
	</head>
	<body>
		<div id="panel">
			<h5 class="head">什么是jQuery?</h5>
			<div class="content">
				jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
			</div>
			<button>按钮</button>
		</div>
	</body>

</html>
